<template>
  <Toolbar params-url="main" />
  <div class="toolbar">
    <div v-for="item in menus" :key="item.key" class="item" @click="onOpen(item)">
      {{ item.title }}
    </div>
  </div>
</template>

<script setup lang="ts">
import Toolbar from '@renderer/components/Toolbar/index.vue'
const menus = [
  {
    title: '数据输入',
    url: 'DataInput',
    key: 'DataInput'
  },
  {
    title: '台站噪声计算',
    url: 'Stations',
    key: 'Stations'
  },
  {
    title: '检测能力评估',
    url: 'Detection',
    key: 'Detection'
  },
  {
    title: '预警能力评估',
    url: 'Warning',
    key: 'Warning'
  },
  {
    title: '烈度速报精度',
    url: 'QuickReport',
    key: 'QuickReport'
  },
  {
    title: '结果汇总',
    url: 'Summary',
    key: 'Summary'
  },
  {
    title: '噪声PDF评估',
    url: 'Assessment',
    key: 'Assessment'
  },
  {
    title: '退出',
    url: 'Out',
    key: 'Out'
  }
]
const onOpen = (item): void => {
  if (item.url === 'Out') return window.renderAPI.closeWin('main')
  window.renderAPI.openWin(item)
}
</script>

<style lang="scss" scoped>
.toolbar {
  display: flex;
  align-items: center;
  font-size: 14px;
  height: 25px;
  line-height: 25px;
  .item {
    white-space: nowrap;
    height: 100%;
    padding: 0 5px;
    cursor: pointer;
    &:hover {
      background-color: #ccc;
    }
  }
}
.content {
  background-color: #0099b3;
  height: calc(100vh - 55px);
}
</style>
